[class*="col-"] {
    margin: 0;
  }
  
  @media screen and (max-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 30%;}
    .col-s-5 {width: 40%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
    #bodyscreen {width:100%}
    #main {width:100%; padding: 0px 10px 8px 10px;}
    #altmain, #cmain {width:95%; padding: 30px 10px 8px 10px;}
    #sidenav {width:100%}
    .writeHeader {width:95%}
    .flex { display: flex; flex-direction: column;}
    .aside {margin-top: 1em;}
    #buttoncolumn, .fuckallvert {display: none}
    .abouttextbox {width:100%}
    .modal-content {width: 100%;}
    .galcol { width: 33%; }
    .update {height: 200px;}
}



  @media screen and (min-width: 602px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 29%;}
    .col-4 {width: 30%;}
    .col-5 {width: 40%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    #bodyscreen {width: 70%}
    #main {padding: 0px 30px 8px 30px; height: 35em;width:95%;}
    #altmain, #cmain {padding: 30px 30px 8px 30px;}
    .writeHeader {width:80%;}
    .flex { display: flex; flex-direction: row;}
    .aside {margin-left: 1em; display: flex;}
    .galcol { width: 25%; }
  }

/* clearfix hack to prevent image overflow. check out the W3Schools page on it. */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
  }